{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">

        <link rel="shortcut icon" href="{% static '' %}velonic/img/favicon_1.ico">

        <title>个人档案</title>

        <!-- Bootstrap core CSS -->
        <link href="{% static '' %}velonic/css/bootstrap.min.css" rel="stylesheet">
        <link href="{% static '' %}velonic/css/bootstrap-reset.css" rel="stylesheet">

        <!--Animation css-->
        <link href="{% static '' %}velonic/css/animate.css" rel="stylesheet">

        <!-- sweet alerts -->
        <link href="{% static '' %}velonic/css/sweet-alert.min.css" rel="stylesheet">

        <!--Icon-fonts css-->
        <link href="{% static '' %}velonic/css/font-awesome.css" rel="stylesheet" />
        <link href="{% static '' %}velonic/css/ionicons.min.css" rel="stylesheet" />
        <link href="{% static '' %}velonic/css/material-design-iconic-font.min.css" rel="stylesheet" />

        <!-- Custom styles for this template -->
        <link href="{% static '' %}velonic/css/style.css" rel="stylesheet">
        <link href="{% static '' %}velonic/css/helper.css" rel="stylesheet">
        

        <!-- HTML5 shim and Respond.js IE8 support of HTML5 tooltipss and media queries -->
        <!--[if lt IE 9]>
          <script src="js/html5shiv.js"></script>
          <script src="js/respond.min.js"></script>
        <![endif]-->


    </head>


    <body>

        <!-- Aside Start-->
        {% include 'velonic/block/side_nav.html' %}
        <!-- Aside Ends-->


        <!--Main Content Start -->
        <section class="content">
            
            <!-- Header -->
            {% include 'velonic/block/header.html' %}
            <!-- Header Ends -->


            <!-- Page Content Start -->
            <!-- ================== -->

            <div class="wraper container-fluid">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="bg-picture" style="background-image:url('{% static '' %}velonic/img/bg_6.jpg')">
                          <span class="bg-picture-overlay"></span><!-- overlay -->
                          <!-- meta -->
                          <div class="box-layout meta bottom">
                            <div class="col-sm-6 clearfix">
                              <span class="img-wrapper pull-left m-r-15">{% if user_profile.avatar %}<img src="/uploads/{{ user_profile.avatar }}"  style="width:64px" class="br-radius">{% else %}<img src="{% static '' %}velonic/img/avatar-2.jpg" alt="" style="width:64px" class="br-radius">{% endif %}</span>
                              <div class="media-body">
                                <h3 class="text-white mb-2 m-t-10 ellipsis">{{ user_profile.name }}</h3>
                                <h5 class="text-white"> 跨境电商 (玩具类目)/ 淘宝大学讲师</h5>
                              </div>
                            </div>
                            <div class="col-sm-6">

                              <div class="pull-right">
                                <div class="dropdown">
                                    <a data-toggle="dropdown" class="dropdown-toggle btn btn-primary" href="#"> 关注 <span class="caret"></span></a>
                                    <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                        <li><a href="#">Poke</a></li>
                                        <li><a href="#">私信</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">取消关注</a></li>
                                    </ul>
                                </div>
                              </div>
                            </div>
                          </div>
                          <!--/ meta -->
                        </div>
                    </div>
                </div>

                <div class="row m-t-30">
                    <div class="col-sm-12 col-md-9">
                        <div class="panel panel-default p-0">
                            <div class="panel-body p-0"> 
                                <ul class="nav nav-tabs profile-tabs">
                                    <li class="active"><a data-toggle="tab" href="#edit-profile">修改密码</a></li>
                                </ul>

                                <div class="tab-content m-0">

                                    <!-- settings -->
                                <div id="edit-profile" class="tab-pane active">
                                    <div class="user-profile-content">
                                        <form role="form" class="form-horizontal" method="POST" onsubmit="return checkform(this);">
                                        {% csrf_token %}
                                            <h3 style="text-align: center;">修改密码</h3>

                                            <div class="form-group row">
                                                <label for="oldPassword" class="col-sm-2 form-control-label">旧密码</label>
                                                <div class="col-sm-10">
                                                    <input type="password" value="" id="oldPassword" name="oldPassword" class="form-control">
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <label for="newPassword" class="col-sm-2 form-control-label">新密码</label>
                                                <div class="col-sm-10">
                                                    <input type="password" value="" id="newPassword" name="newPassword" class="form-control">
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <label for="comfirmPassword" class="col-sm-2 form-control-label">确认密码</label>
                                                <div class="col-sm-10">
                                                    <input type="password" value="" name="comfirmPassword"  id="comfirmPassword" class="form-control">
                                                </div>
                                            </div>
                                            <button class="btn btn-primary" type="submit">保存</button>
                                        </form>
                                    </div>
                                </div>


                            </div>
             
                        </div> 
                    </div>
                </div>
            </div>
            


        </div>

        <!-- Page Content Ends -->
        <!-- ================== -->

        <!-- Footer Start -->
        {% include 'velonic/block/footer.html' %}
        <!-- Footer Ends -->



    </section>
    <!-- Main Content Ends -->
        




    <!-- js placed at the end of the document so the pages load faster -->
        <script src="{% static '' %}velonic/js/jquery.js"></script>
        <script src="{% static '' %}velonic/js/bootstrap.min.js"></script>
        <script src="{% static '' %}velonic/js/pace.min.js"></script>
        <script src="{% static '' %}velonic/js/modernizr.min.js"></script>
        <script src="{% static '' %}velonic/js/wow.min.js"></script>
        <script src="{% static '' %}velonic/js/jquery.scrollTo.min.js"></script>
        <script src="{% static '' %}velonic/js/jquery.nicescroll.js" type="text/javascript"></script>

        <script src="{% static '' %}velonic/js/jquery.app.js"></script>



    {% include 'velonic/block/footer_comm.html' %}

    <script>
        function checkform(obj){
            var oldPassword = $('#oldPassword').val();
            var newPassword = $('#newPassword').val();
            var comfirmPassword = $('#comfirmPassword').val();
            if(oldPassword.length<=0){
                alert("请填写旧密码");
                $('#oldPassword').focus();
                return false;
            }
            if(newPassword.length<=0){
                alert("请填写新密码");
                $('#newPassword').focus();
                return false;
            }
            if(comfirmPassword.length<=0){
                alert("请填写确认密码");
                $('#comfirmPassword').focus();
                return false;
            }

            if(newPassword == oldPassword){
                alert("新密码不能与旧密码相同");
                $('#newPassword').focus();
                return false;
            }


            if(newPassword != comfirmPassword){
                alert("确认密码与新密码不一致");
                $('#comfirmPassword').focus();
                return false;
            }

        }
    </script>


  </body>
</html>
